<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">hello box</div>
    <script>
      const box = document.getElementById("box");
      // 保存textarea对象
      let textarea = null;
      box.onclick = function () {
        // 获取box的内容
        const boxConent = this.innerHTML;
        this.innerHTML = ""; //清空box
        // 创建textarea
        textarea = document.createElement("textarea");
        // 置入box内容
        textarea.value = boxConent;
        // textarea 置入 box
        box.append(textarea);
        // textarea 获取焦点
        textarea.focus();

        // 取消冒泡
        textarea.onclick = function (e) {
          e.stopPropagation();
        };

        textarea.onblur = function () {
          // 获取textarea的内容，放入box
          box.innerHTML = this.value;
        };

        textarea.onkeydown = function (e) {
          if (e.key === "Enter") {
            textarea.blur();
          }
        };
      };

      /*
        1. 点击box
        2. 创建textarea文本框
        3. 将box中的文字放到 textarea 中
        4. 编辑文字
        5. 用户按下回车或失去焦点后，将textare中的文字回填到box中
      */
    </script>
  </body>
</html>
